<template>
    <div class="upload_info">
        <a-upload-dragger
            name="file"
            class="upload_btn"
            :multiple="false"
            :file-list="fileList"
            :headers="headers"
            :before-upload="beforeUpload"
            @remove="handleRemoveFile"
        >
            <p class="upload-tip"> <cloud-upload-outlined />选择或拖拽上传文件,单个10M以内 </p>
        </a-upload-dragger>
    </div>
</template>

<script>
    import { defineComponent, reactive } from 'vue'

    export default defineComponent({
        name: 'UploadFile',
        emits: ['change'],
        setup(props, { emit }) {
            const headers = reactive({
                authorization: 'authorization-text'
            })
            const fileList = reactive([]) // 上传文件
            const maxSize = 2 // 上传文件大小
            const unit = 1024 // 进制转换单位
            const beforeUpload = file => {
                if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
                    message.error('只能上传xls或xlsx格式文件')
                    return false
                }
                if (file.size / unit / unit > maxSize) {
                    message.warning(`上传文件最大支持${maxSize}MB!`)
                    return false
                }
                fileList[0] = file
                emit('change', file)
                return false
            }
            const handleRemoveFile = () => {
                fileList[0] = {}
            }
            return {
                handleRemoveFile,
                beforeUpload,
                headers,
                fileList
            }
        }
    })
</script>

<style lang="less" scoped>
    .upload_info {
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        align-items: center;
    }
    .upload_info span {
        height: 100%;
        width: 100%;
    }

    .upload_info :deep(.upload_btn) {
        width: 100%;
        height: 100%;
    }

    .upload_info .upload-tip {
        align-self: center;
    }

    .upload_info .upload {
        margin-right: 5px;
    }
</style>
